<!doctype html>
<html>
<head>
  <meta charset='utf-8' />
  <title>  | Documentation</title>
  <meta name='viewport' content='width=device-width,initial-scale=1'>
  <link href='assets/bass.css' type='text/css' rel='stylesheet' />
  <link href='assets/style.css' type='text/css' rel='stylesheet' />
  <link href='assets/github.css' type='text/css' rel='stylesheet' />
</head>
<body class='documentation'>
  <div class='max-width-4 mx-auto'>
    <div class='clearfix md-mxn2'>
      <div class='fixed xs-hide fix-3 overflow-auto max-height-100'>
        <div class='py1 px2'>
          <h3 class='mb0 no-anchor'></h3>
          <div class='mb1'><code></code></div>
          <input
            placeholder='Filter'
            id='filter-input'
            class='col12 block input'
            type='text' />
          <div id='toc'>
            <ul class='list-reset h5 py1-ul'>
              
                
                <li><a
                  href='#zooming'
                  class=" toggle-sibling">
                  Zooming
                  <span class='icon'>▸</span>
                </a>
                
                <div class='toggle-target display-none'>
                  
                  
                    <ul class='list-reset py1-ul pl1'>
                      <li class='h5'><span>Instance members</span></li>
                      
                      <li><a
                        href='#Zooming#constructor'
                        class='regular pre-open'>
                        #constructor
                      </a></li>
                      
                      <li><a
                        href='#Zooming#listen'
                        class='regular pre-open'>
                        #listen
                      </a></li>
                      
                      <li><a
                        href='#Zooming#config'
                        class='regular pre-open'>
                        #config
                      </a></li>
                      
                      <li><a
                        href='#Zooming#open'
                        class='regular pre-open'>
                        #open
                      </a></li>
                      
                      <li><a
                        href='#Zooming#close'
                        class='regular pre-open'>
                        #close
                      </a></li>
                      
                      <li><a
                        href='#Zooming#grab'
                        class='regular pre-open'>
                        #grab
                      </a></li>
                      
                      <li><a
                        href='#Zooming#move'
                        class='regular pre-open'>
                        #move
                      </a></li>
                      
                      <li><a
                        href='#Zooming#release'
                        class='regular pre-open'>
                        #release
                      </a></li>
                      
                    </ul>
                  
                  
                </div>
                
                </li>
              
                
                <li><a
                  href='#options'
                  class="">
                  options
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#defaultzoomable'
                  class="">
                  defaultZoomable
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#enablegrab'
                  class="">
                  enableGrab
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#preloadimage'
                  class="">
                  preloadImage
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#closeonwindowresize'
                  class="">
                  closeOnWindowResize
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#transitionduration'
                  class="">
                  transitionDuration
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#transitiontimingfunction'
                  class="">
                  transitionTimingFunction
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#bgcolor'
                  class="">
                  bgColor
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#bgopacity'
                  class="">
                  bgOpacity
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#scalebase'
                  class="">
                  scaleBase
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#scaleextra'
                  class="">
                  scaleExtra
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#scrollthreshold'
                  class="">
                  scrollThreshold
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#zindex'
                  class="">
                  zIndex
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#customsize'
                  class="">
                  customSize
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onopen'
                  class="">
                  onOpen
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onclose'
                  class="">
                  onClose
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onrelease'
                  class="">
                  onRelease
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onbeforeopen'
                  class="">
                  onBeforeOpen
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onbeforeclose'
                  class="">
                  onBeforeClose
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onbeforegrab'
                  class="">
                  onBeforeGrab
                  
                </a>
                
                </li>
              
                
                <li><a
                  href='#onbeforerelease'
                  class="">
                  onBeforeRelease
                  
                </a>
                
                </li>
              
            </ul>
          </div>
          <div class='mt1 h6 quiet'>
            <a href='http://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
          </div>
        </div>
      </div>
      <div class='fix-margin-3'>
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='zooming'>
      Zooming
    </h3>
    
    
  </div>
  

  <p>Zooming instance.</p>


  <div class='pre p1 fill-light mt0'>new Zooming()</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  
    <div class='py1 quiet mt1 prose-big'>Instance Members</div>
    <div class="clearfix">
  
    <div class='border-bottom' id='Zooming#constructor'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>constructor(options?)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  

  <div class='pre p1 fill-light mt0'>constructor(options: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>?)</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>options</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>?)</code>
	    Update default options if provided.

          </div>
          
        </div>
      
    </div>
  

  

  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#listen'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>listen(el)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Make element(s) zoomable.</p>


  <div class='pre p1 fill-light mt0'>listen(el: (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a>)): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>el</span> <code class='quiet'>((<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a>))</code>
	    A css selector or an Element.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#config'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>config(options)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Update options or return current options if no argument is provided.</p>


  <div class='pre p1 fill-light mt0'>config(options: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): (this | this.options)</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>options</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    An Object that contains this.options.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>(this | this.options)</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#open'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>open(el, cb = this.options.onOpen)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Open (zoom in) the Element.</p>


  <div class='pre p1 fill-light mt0'>open(el: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a>, cb: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>el</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a>)</code>
	    The Element to open.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?
            = <code>this.options.onOpen</code>)</code>
	    A callback function that will
be called when a target is opened and transition has ended. It will get
the target element as the argument.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#close'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>close(cb = this.options.onClose)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Close (zoom out) the Element currently opened.</p>


  <div class='pre p1 fill-light mt0'>close(cb: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?
            = <code>this.options.onClose</code>)</code>
	    A callback function that will
be called when a target is closed and transition has ended. It will get
the target element as the argument.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#grab'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>grab(x, y, scaleExtra?, cb = this.options.scaleExtra)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Grab the Element currently opened given a position and apply extra zoom-in.</p>


  <div class='pre p1 fill-light mt0'>grab(x: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, y: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, scaleExtra: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?= sten(target, transEndEv, cb: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>x</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    The X-axis of where the press happened.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>y</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    The Y-axis of where the press happened.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>scaleExtra</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?= sten(target, transEndEv)</code>
	    Extra zoom-in to apply.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?
            = <code>this.options.scaleExtra</code>)</code>
	    A callback function that
will be called when a target is grabbed and transition has ended. It
will get the target element as the argument.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#move'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>move(x, y, scaleExtra?, cb = this.options.scaleExtra)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Move the Element currently grabbed given a position and apply extra zoom-in.</p>


  <div class='pre p1 fill-light mt0'>move(x: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, y: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, scaleExtra: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?=      if (cb) cb(target), cb: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>x</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    The X-axis of where the press happened.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>y</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    The Y-axis of where the press happened.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>scaleExtra</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>?=      if (cb) cb(target))</code>
	    Extra zoom-in to apply.

          </div>
          
        </div>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?
            = <code>this.options.scaleExtra</code>)</code>
	    A callback function that
will be called when a target is moved and transition has ended. It will
get the target element as the argument.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
    <div class='border-bottom' id='Zooming#release'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>release(cb = this.options.onRelease)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>

  

  <p>Release the Element currently grabbed.</p>


  <div class='pre p1 fill-light mt0'>release(cb: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?): this</div>
  
  

  
  
  
  
  

  
    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>
      
        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>?
            = <code>this.options.onRelease</code>)</code>
	    A callback function that
will be called when a target is released and transition has ended. It
will get the target element as the argument.

          </div>
          
        </div>
      
    </div>
  

  

  
    
      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code>this</code>:
        

      
    
  

  

  

  

  

  
</section>

      </div>
    </div>
  
</div>

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='options'>
      options
    </h3>
    
    
  </div>
  

  <p>A list of options.</p>


  <div class='pre p1 fill-light mt0'>options</div>
  
  

  
  
  
  
  

  

  

  

  

  
    <div class='py1 quiet mt1 prose-big'>Example</div>
    
      
      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Default options</span>
<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">defaultZoomable</span>: <span class="hljs-string">'img[data-action="zoom"]'</span>,
  <span class="hljs-attr">enableGrab</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">preloadImage</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">closeOnWindowResize</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">transitionDuration</span>: <span class="hljs-number">0.4</span>,
  <span class="hljs-attr">transitionTimingFunction</span>: <span class="hljs-string">'cubic-bezier(0.4, 0, 0, 1)'</span>,
  <span class="hljs-attr">bgColor</span>: <span class="hljs-string">'rgb(255, 255, 255)'</span>,
  <span class="hljs-attr">bgOpacity</span>: <span class="hljs-number">1</span>,
  <span class="hljs-attr">scaleBase</span>: <span class="hljs-number">1.0</span>,
  <span class="hljs-attr">scaleExtra</span>: <span class="hljs-number">0.5</span>,
  <span class="hljs-attr">scrollThreshold</span>: <span class="hljs-number">40</span>,
  <span class="hljs-attr">zIndex</span>: <span class="hljs-number">998</span>,
  <span class="hljs-attr">customSize</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onOpen</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onClose</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onRelease</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onBeforeOpen</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onBeforeClose</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onBeforeGrab</span>: <span class="hljs-literal">null</span>,
  <span class="hljs-attr">onBeforeRelease</span>: <span class="hljs-literal">null</span>
}</pre>
    
  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='defaultzoomable'>
      defaultZoomable
    </h3>
    
    
  </div>
  

  <p>Zoomable elements by default. It can be a css selector or an element.</p>


  <div class='pre p1 fill-light mt0'>defaultZoomable</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='enablegrab'>
      enableGrab
    </h3>
    
    
  </div>
  

  <p>To be able to grab and drag the image for extra zoom-in.</p>


  <div class='pre p1 fill-light mt0'>enableGrab</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='preloadimage'>
      preloadImage
    </h3>
    
    
  </div>
  

  <p>Preload zoomable images.</p>


  <div class='pre p1 fill-light mt0'>preloadImage</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='closeonwindowresize'>
      closeOnWindowResize
    </h3>
    
    
  </div>
  

  <p>Close the zoomed image when browser window is resized.</p>


  <div class='pre p1 fill-light mt0'>closeOnWindowResize</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='transitionduration'>
      transitionDuration
    </h3>
    
    
  </div>
  

  <p>Transition duration in seconds.</p>


  <div class='pre p1 fill-light mt0'>transitionDuration</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='transitiontimingfunction'>
      transitionTimingFunction
    </h3>
    
    
  </div>
  

  <p>Transition timing function.</p>


  <div class='pre p1 fill-light mt0'>transitionTimingFunction</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='bgcolor'>
      bgColor
    </h3>
    
    
  </div>
  

  <p>Overlay background color.</p>


  <div class='pre p1 fill-light mt0'>bgColor</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='bgopacity'>
      bgOpacity
    </h3>
    
    
  </div>
  

  <p>Overlay background opacity.</p>


  <div class='pre p1 fill-light mt0'>bgOpacity</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='scalebase'>
      scaleBase
    </h3>
    
    
  </div>
  

  <p>The base scale factor for zooming. By default scale to fit the window.</p>


  <div class='pre p1 fill-light mt0'>scaleBase</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='scaleextra'>
      scaleExtra
    </h3>
    
    
  </div>
  

  <p>The additional scale factor when grabbing the image.</p>


  <div class='pre p1 fill-light mt0'>scaleExtra</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='scrollthreshold'>
      scrollThreshold
    </h3>
    
    
  </div>
  

  <p>How much scrolling it takes before closing out.</p>


  <div class='pre p1 fill-light mt0'>scrollThreshold</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='zindex'>
      zIndex
    </h3>
    
    
  </div>
  

  <p>The z-index that the overlay will be added with.</p>


  <div class='pre p1 fill-light mt0'>zIndex</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='customsize'>
      customSize
    </h3>
    
    
  </div>
  

  <p>Scale (zoom in) to given width and height. Ignore scaleBase if set.</p>


  <div class='pre p1 fill-light mt0'>customSize</div>
  
  

  
  
  
  
  

  

  

  

  

  
    <div class='py1 quiet mt1 prose-big'>Example</div>
    
      
      <pre class='p1 overflow-auto round fill-light'>customSize: { <span class="hljs-attr">width</span>: <span class="hljs-number">800</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span> }</pre>
    
  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onopen'>
      onOpen
    </h3>
    
    
  </div>
  

  <p>A callback function that will be called when a target is opened and
transition has ended. It will get the target element as the argument.</p>


  <div class='pre p1 fill-light mt0'>onOpen</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onclose'>
      onClose
    </h3>
    
    
  </div>
  

  <p>Same as above, except fired when closed.</p>


  <div class='pre p1 fill-light mt0'>onClose</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onrelease'>
      onRelease
    </h3>
    
    
  </div>
  

  <p>Same as above, except fired when released.</p>


  <div class='pre p1 fill-light mt0'>onRelease</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onbeforeopen'>
      onBeforeOpen
    </h3>
    
    
  </div>
  

  <p>A callback function that will be called before open.</p>


  <div class='pre p1 fill-light mt0'>onBeforeOpen</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onbeforeclose'>
      onBeforeClose
    </h3>
    
    
  </div>
  

  <p>A callback function that will be called before close.</p>


  <div class='pre p1 fill-light mt0'>onBeforeClose</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onbeforegrab'>
      onBeforeGrab
    </h3>
    
    
  </div>
  

  <p>A callback function that will be called before grab.</p>


  <div class='pre p1 fill-light mt0'>onBeforeGrab</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
          
            <section class='p2 mb2 clearfix bg-white minishadow'>

  
  <div class='clearfix'>
    
    <h3 class='fl m0' id='onbeforerelease'>
      onBeforeRelease
    </h3>
    
    
  </div>
  

  <p>A callback function that will be called before release.</p>


  <div class='pre p1 fill-light mt0'>onBeforeRelease</div>
  
  

  
  
  
  
  

  

  

  

  

  

  

  

  
</section>

          
        
      </div>
    </div>
  </div>
  <script src='assets/anchor.js'></script>
  <script src='assets/site.js'></script>
</body>
</html>
